import React, { useState, useEffect } from 'react';
import { toast } from '@/lib/toast-with-audio';
import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip, LineChart, Line, XAxis, YAxis, CartesianGrid, Legend } from 'recharts';
import Drawer from "@/components/Drawer";
import { useTheme } from '@/hooks/useTheme';
import { projectApi } from '@/store/project';
import type { Project } from '@/types/project';
import { projectProgressData, projectStatusData } from '@/data/projectData';
import { motion } from 'framer-motion';

// 项目进度趋势数据
const projectTrendData = [
  { month: '1月', 权限管理系统: 20, 支付中心升级: 0, 用户中心改版: 40, 订单系统优化: 0, 消息平台建设: 0 },
  { month: '2月', 权限管理系统: 40, 支付中心升级: 25, 用户中心改版: 70, 订单系统优化: 0, 消息平台建设: 0 },
  { month: '3月', 权限管理系统: 60, 支付中心升级: 45, 用户中心改版: 100, 订单系统优化: 20, 消息平台建设: 0 },
  { month: '4月', 权限管理系统: 75, 支付中心升级: 60, 用户中心改版: 100, 订单系统优化: 45, 消息平台建设: 15 },
  { month: '5月', 权限管理系统: 75, 支付中心升级: 60, 用户中心改版: 100, 订单系统优化: 45, 消息平台建设: 15 },
];

// 状态徽章组件
const StatusBadge: React.FC<{ status: string }> = ({ status }) => {
  let className = '';
  
  switch (status) {
    case '已完成':
      className = 'bg-green-100 text-green-700';
      break;
    case '进行中':
      className = 'bg-blue-100 text-blue-700';
      break;
    case '规划中':
      className = 'bg-amber-100 text-amber-700';
      break;
    case '已暂停':
      className = 'bg-gray-100 text-gray-700';
      break;
    case '已取消':
      className = 'bg-red-100 text-red-700';
      break;
    default:
      className = 'bg-gray-100 text-gray-700';
  }
  
  return (
    <span className={`px-2 py-1 text-xs font-medium rounded-full ${className}`}>
      {status}
    </span>
  );
};

// 优先级标签组件
const PriorityTag: React.FC<{ priority: string }> = ({ priority }) => {
  let className = '';
  
  switch (priority) {
    case '紧急':
      className = 'bg-red-100 text-red-700';
      break;
    case '高':
      className = 'bg-orange-100 text-orange-700';
      break;
    case '中':
      className = 'bg-amber-100 text-amber-700';
      break;
    case '低':
      className = 'bg-gray-100 text-gray-700';
      break;
    default:
      className = 'bg-gray-100 text-gray-700';
  }
  
  return (
    <span className={`px-2 py-1 text-xs font-medium rounded-full ${className}`}>
      优先级: {priority}
    </span>
  );
};

// 进度条组件
const ProgressBar: React.FC<{ progress: number }> = ({ progress }) => {
  return (
    <div className="w-full bg-gray-200 rounded-full h-2.5">
      <div 
        className="h-2.5 rounded-full transition-all duration-500 ease-out" 
        style={{ 
          width: `${progress}%`,
          backgroundColor: progress === 100 ? '#10b981' : '#3b82f6'
        }}
      ></div>
    </div>
  );
};



export default function Projects() {
  const { isDark } = useTheme();
  const [projects, setProjects] = useState<Project[]>([]);
  const [loading, setLoading] = useState(false);
  const [searchTerm, setSearchTerm] = useState('');
  const [statusFilter, setStatusFilter] = useState('all');
  const [priorityFilter, setPriorityFilter] = useState('all');
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
  const [formData, setFormData] = useState({
    name: '',
    code: '',
    description: '',
    status: '规划中' as Project['status'],
    priority: '中' as Project['priority'],
    progress: 0,
    startDate: '',
    endDate: '',
    manager: '',
    teamMembers: [] as string[],
    budget: 0,
    actualCost: 0
  });
  
  // 加载项目数据
  const loadProjects = async () => {
    setLoading(true);
    try {
      const response = await projectApi.getProjects({
        search: searchTerm || undefined,
        status: statusFilter !== 'all' ? statusFilter as Project['status'] : undefined,
        priority: priorityFilter !== 'all' ? priorityFilter as Project['priority'] : undefined
      });
      
      if (response.success) {
        setProjects(response.data);
      } else {
        toast.error(response.message || '获取项目列表失败');
      }
    } catch (error) {
      toast.error('获取项目列表失败');
      console.error('Error loading projects:', error);
    } finally {
      setLoading(false);
    }
  };
  
  // 防抖搜索和过滤
  useEffect(() => {
    const timer = setTimeout(() => {
      loadProjects();
    }, 500);
    
    return () => clearTimeout(timer);
  }, [searchTerm, statusFilter, priorityFilter]);
  
  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchTerm(e.target.value);
  };
  
  const handleStatusFilterChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setStatusFilter(e.target.value);
  };
  
  const handlePriorityFilterChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setPriorityFilter(e.target.value);
  };
  
  // 新建项目
  const handleCreateProject = async () => {
    try {
      const response = await projectApi.createProject(formData);
      
      if (response.success) {
        toast.success('项目创建成功');
        setIsDrawerOpen(false);
        setFormData({
          name: '',
          code: '',
          description: '',
          status: '规划中',
          priority: '中',
          progress: 0,
          startDate: '',
          endDate: '',
          manager: '',
          teamMembers: [],
          budget: 0,
          actualCost: 0
        });
        loadProjects(); // 重新加载项目列表
      } else {
        toast.error(response.message || '项目创建失败');
      }
    } catch (error) {
      toast.error('项目创建失败');
      console.error('Error creating project:', error);
    }
  };
  
  // 编辑项目
  const handleEditProject = (project: Project) => {
    setFormData({
      name: project.name,
      code: project.code,
      description: project.description,
      status: project.status,
      priority: project.priority,
      progress: project.progress,
      startDate: project.startDate,
      endDate: project.endDate,
      manager: project.manager,
      teamMembers: project.teamMembers,
      budget: project.budget,
      actualCost: project.actualCost
    });
    setIsDrawerOpen(true);
  };
  
  // 删除项目
  const handleDeleteProject = async (projectId: number) => {
    if (window.confirm('确定要删除这个项目吗？')) {
      try {
        const response = await projectApi.deleteProject(projectId);
        
        if (response.success) {
          toast.success('项目删除成功');
          loadProjects(); // 重新加载项目列表
        } else {
          toast.error(response.message || '项目删除失败');
        }
      } catch (error) {
        toast.error('项目删除失败');
        console.error('Error deleting project:', error);
      }
    }
  };
  
  const handleCloseDrawer = () => {
    setIsDrawerOpen(false);
  };
  
  const handleSubmit = () => {
    // 提交表单逻辑
    setIsDrawerOpen(false);
    toast.success('项目创建成功');
  };
  
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };
  
  return (
    <div>
      <div className="mb-6">
        <motion.div 
          className="mb-8"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
        >
          <h1 className="text-2xl font-bold text-gray-800 dark:text-gray-100">项目管理</h1>
          <p className="text-gray-600 dark:text-gray-400 mt-1">管理所有项目的进度与详情</p>
        </motion.div>
      </div>
      
      {/* 项目概览卡片 */}
      <div className="grid grid-cols-4 gap-6 mb-6">
        <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5 hover:shadow-md transition-shadow">
          <div className="flex items-center justify-between mb-3">
            <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400">总项目数</h3>
            <i className="fa-solid fa-folder-open text-blue-500 dark:text-blue-400"></i>
          </div>
          <div className="flex items-end justify-between">
            <p className="text-3xl font-bold text-gray-900 dark:text-gray-100">{projects.length}</p>
            <p className="text-sm text-green-600 dark:text-green-400 flex items-center">
              <i className="fa-solid fa-arrow-up mr-1"></i>12%
            </p>
          </div>
        </div>
        
        <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5 hover:shadow-md transition-shadow">
          <div className="flex items-center justify-between mb-3">
            <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400">进行中项目</h3>
            <i className="fa-solid fa-spinner text-blue-500 dark:text-blue-400"></i>
          </div>
          <div className="flex items-end justify-between">
            <p className="text-3xl font-bold text-gray-900 dark:text-gray-100">{projects.filter(p => p.status === '进行中').length}</p>
            <p className="text-sm text-green-600 dark:text-green-400 flex items-center">
              <i className="fa-solid fa-arrow-up mr-1"></i>8%
            </p>
          </div>
        </div>
        
        <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5 hover:shadow-md transition-shadow">
          <div className="flex items-center justify-between mb-3">
            <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400">已完成项目</h3>
            <i className="fa-solid fa-check-circle text-green-500 dark:text-green-400"></i>
          </div>
          <div className="flex items-end justify-between">
            <p className="text-3xl font-bold text-gray-900 dark:text-gray-100">{projects.filter(p => p.status === '已完成').length}</p>
            <p className="text-sm text-green-600 dark:text-green-400 flex items-center">
              <i className="fa-solid fa-arrow-up mr-1"></i>23%
            </p>
          </div>
        </div>
        
        <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5 hover:shadow-md transition-shadow">
          <div className="flex items-center justify-between mb-3">
            <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400">规划中项目</h3>
            <i className="fa-solid fa-calendar text-purple-500 dark:text-purple-400"></i>
          </div>
          <div className="flex items-end justify-between">
            <p className="text-3xl font-bold text-gray-900 dark:text-gray-100">
              {projects.filter(p => p.status === '规划中').length}
            </p>
            <p className="text-sm text-green-600 dark:text-green-400 flex items-center">
              <i className="fa-solid fa-arrow-up mr-1"></i>5%
            </p>
          </div>
        </div>
      </div>
      
      {/* 图表区域 */}
      <div className="grid grid-cols-3 gap-6 mb-6">
        {/* 项目状态分布 */}
        <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5">
          <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">项目状态分布</h2>
          <div className="h-64">
            <ResponsiveContainer width="100%" height="100%">
              <PieChart>
                <Pie
                  data={[
                    { name: '规划中', value: 12, color: '#3b82f6' },
                    { name: '进行中', value: 18, color: '#10b981' },
                    { name: '已暂停', value: 5, color: '#f59e0b' },
                    { name: '已完成', value: 8, color: '#8b5cf6' },
                    { name: '已取消', value: 2, color: '#ef4444' }
                  ]}
                  cx="50%"
                  cy="50%"
                  innerRadius={60}
                  outerRadius={80}
                  fill="#8884d8"
                  paddingAngle={2}
                  dataKey="value"
                  label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                  labelLine={false}
                >
                  {[
                    { name: '规划中', value: 12, color: '#3b82f6' },
                    { name: '进行中', value: 18, color: '#10b981' },
                    { name: '已暂停', value: 5, color: '#f59e0b' },
                    { name: '已完成', value: 8, color: '#8b5cf6' },
                    { name: '已取消', value: 2, color: '#ef4444' }
                  ].map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={entry.color} />
                  ))}
                </Pie>
                <Tooltip formatter={(value, name) => [`${value}个项目`, name]} />
              </PieChart>
            </ResponsiveContainer>
          </div>
        </div>
        
        {/* 项目进度趋势 */}
        <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5 col-span-2">
          <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">项目进度趋势</h2>
          <div className="h-64">
            <ResponsiveContainer width="100%" height="100%">
              <LineChart data={projectTrendData} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
                <CartesianGrid strokeDasharray="3 3" vertical={false} />
                <XAxis dataKey="month" />
                <YAxis tickFormatter={(value) => `${value}%`} domain={[0, 100]} />
                <Tooltip formatter={(value) => [`${value}%`, '']} />
                <Legend verticalAlign="top" height={36} />
                <Line type="monotone" dataKey="权限管理系统" stroke="#3b82f6" strokeWidth={2} dot={{ r: 4 }} activeDot={{ r: 6 }} />
                <Line type="monotone" dataKey="支付中心升级" stroke="#8b5cf6" strokeWidth={2} dot={{ r: 4 }} activeDot={{ r: 6 }} />
                <Line type="monotone" dataKey="用户中心改版" stroke="#10b981" strokeWidth={2} dot={{ r: 4 }} activeDot={{ r: 6 }} />
              </LineChart>
            </ResponsiveContainer>
          </div>
        </div>
      </div>
      
      {/* 工具栏 */}
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
        <div className="flex flex-wrap items-center gap-4">
          <div className="relative">
            <input
              type="text"
              placeholder="搜索项目名称、编号或负责人..."
              className="pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent w-64"
              value={searchTerm}
              onChange={handleSearchChange}
            />
            <i className="fa-solid fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
          </div>
          
          <select 
            className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            value={statusFilter}
            onChange={handleStatusFilterChange}
          >
            <option value="all">全部状态</option>
            <option value="规划中">规划中</option>
            <option value="进行中">进行中</option>
            <option value="已完成">已完成</option>
            <option value="已暂停">已暂停</option>
            <option value="已取消">已取消</option>
          </select>
          
          <select 
            className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            value={priorityFilter}
            onChange={handlePriorityFilterChange}
          >
            <option value="all">全部优先级</option>
            <option value="紧急">紧急</option>
            <option value="高">高</option>
            <option value="中">中</option>
            <option value="低">低</option>
          </select>
        </div>
        
        <button 
          className="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors flex items-center gap-2"
          onClick={() => setIsDrawerOpen(true)}
        >
          <i className="fa-solid fa-plus"></i>
          新建项目
        </button>
      </div>
      
      {/* 项目列表 */}
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
        {loading ? (
          <div className="flex justify-center items-center py-12">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
            <span className="ml-2 text-gray-600 dark:text-gray-400">加载中...</span>
          </div>
        ) : (
          <>
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead className="bg-gray-50 dark:bg-gray-700">
                  <tr>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">项目名称</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">项目编号</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">负责人</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">状态</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">进度</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">优先级</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">操作</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-200 dark:divide-gray-600">
                  {projects.length === 0 ? (
                    <tr>
                      <td colSpan={7} className="px-6 py-8 text-center text-gray-500 dark:text-gray-400">
                        <i className="fa-solid fa-inbox text-4xl mb-2 block"></i>
                        <p>暂无项目数据</p>
                      </td>
                    </tr>
                  ) : (
                    projects.map((project) => (
                      <tr key={project.id} className="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="flex items-center">
                            <div className="flex-shrink-0 h-10 w-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
                              <span className="text-white font-bold">{project.name.charAt(0)}</span>
                            </div>
                            <div className="ml-4">
                              <div className="text-sm font-medium text-gray-900 dark:text-gray-100">{project.name}</div>
                              <div className="text-sm text-gray-500 dark:text-gray-400">{project.startDate} - {project.endDate}</div>
                            </div>
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{project.code}</td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{project.manager}</td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <StatusBadge status={project.status} />
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <ProgressBar progress={project.progress} />
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <PriorityTag priority={project.priority} />
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                          <div className="flex items-center space-x-2">
                            <button 
                              className="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300"
                              onClick={() => handleEditProject(project)}
                            >
                              <i className="fa-solid fa-edit"></i>
                            </button>
                            <button 
                              className="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300"
                              onClick={() => handleDeleteProject(project.id)}
                            >
                              <i className="fa-solid fa-trash"></i>
                            </button>
                          </div>
                        </td>
                      </tr>
                    ))
                  )}
                </tbody>
              </table>
            </div>
            
            {/* 分页 */}
            <div className="px-6 py-4 border-t border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700">
              <div className="flex items-center justify-between">
                <div className="text-sm text-gray-700 dark:text-gray-300">
                  显示 <span className="font-medium">{projects.length}</span> 个项目
                </div>
                <div className="flex items-center space-x-2">
                  <button className="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700">
                    上一页
                  </button>
                  <span className="text-sm text-gray-700 dark:text-gray-300">第 1 页</span>
                  <button className="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700">
                    下一页
                  </button>
                </div>
              </div>
            </div>
          </>
        )}
      </div>
      
      {/* 新建项目抽屉 */}
      <Drawer isOpen={isDrawerOpen} onClose={() => setIsDrawerOpen(false)} title="新建项目">
        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">项目名称</label>
            <input
              type="text"
              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
              value={formData.name}
              onChange={(e) => setFormData({...formData, name: e.target.value})}
            />
          </div>
          
          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">项目编号</label>
            <input
              type="text"
              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
              value={formData.code}
              onChange={(e) => setFormData({...formData, code: e.target.value})}
            />
          </div>
          
          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">项目描述</label>
            <textarea
              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
              rows={3}
              value={formData.description}
              onChange={(e) => setFormData({...formData, description: e.target.value})}
            />
          </div>
          
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">状态</label>
              <select
                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
                value={formData.status}
                onChange={(e) => setFormData({...formData, status: e.target.value as Project['status']})}
              >
                <option value="规划中">规划中</option>
                <option value="进行中">进行中</option>
                <option value="已完成">已完成</option>
                <option value="已暂停">已暂停</option>
                <option value="已取消">已取消</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">优先级</label>
              <select
                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
                value={formData.priority}
                onChange={(e) => setFormData({...formData, priority: e.target.value as Project['priority']})}
              >
                <option value="高">高</option>
                <option value="中">中</option>
                <option value="低">低</option>
              </select>
            </div>
          </div>
          
          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">进度 (%)</label>
            <input
              type="number"
              min="0"
              max="100"
              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
              value={formData.progress}
              onChange={(e) => setFormData({...formData, progress: parseInt(e.target.value) || 0})}
            />
          </div>
          
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">开始日期</label>
              <input
                type="date"
                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
                value={formData.startDate}
                onChange={(e) => setFormData({...formData, startDate: e.target.value})}
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">结束日期</label>
              <input
                type="date"
                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
                value={formData.endDate}
                onChange={(e) => setFormData({...formData, endDate: e.target.value})}
              />
            </div>
          </div>
          
          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">负责人</label>
            <input
              type="text"
              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
              value={formData.manager}
              onChange={(e) => setFormData({...formData, manager: e.target.value})}
            />
          </div>
          
          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">团队成员</label>
            <input
              type="text"
              placeholder="输入团队成员，用逗号分隔"
              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
              value={formData.teamMembers.join(', ')}
              onChange={(e) => setFormData({...formData, teamMembers: e.target.value.split(',').map(s => s.trim()).filter(s => s)})}
            />
          </div>
          
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">预算 (¥)</label>
              <input
                type="number"
                min="0"
                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
                value={formData.budget}
                onChange={(e) => setFormData({...formData, budget: parseInt(e.target.value) || 0})}
            />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">实际成本 (¥)</label>
              <input
                type="number"
                min="0"
                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
                value={formData.actualCost}
                onChange={(e) => setFormData({...formData, actualCost: parseInt(e.target.value) || 0})}
              />
            </div>
          </div>
          
          <div className="flex justify-end space-x-3 pt-4">
            <button
              className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
              onClick={() => setIsDrawerOpen(false)}
            >
              取消
            </button>
            <button
              className="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors"
              onClick={handleCreateProject}
            >
              创建项目
            </button>
          </div>
        </div>
      </Drawer>
    </div>
  );
}